<template>
  <div class="markdown-wrapper">
    <textarea ref="editor"></textarea>
  </div>
</template>

<script>
import Simplemde from 'simplemde'
import 'simplemde/dist/simplemde.min.css'
import { uploadImg } from '@/api/blog/upload'
export default {
  naem: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    localCache: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      editor: null
    }
  },
  methods: {
    addEvents () {
      this.editor.codemirror.on('change', () => {
        let value = this.editor.value()
        if (this.localCache) localStorage.markdownContent = value
        this.$emit('input', value)
        this.$emit('on-change', value)
      })
      this.editor.codemirror.on('focus', () => {
        this.$emit('on-focus', this.editor.value())
      })
      this.editor.codemirror.on('blur', () => {
        this.$emit('on-blur', this.editor.value())
      })
      this.editor.codemirror.on('drop', (editor, e) => {
        if (!(e.dataTransfer && e.dataTransfer.files)) {
          this.$Message.error('该浏览器不支持操作')
          return
        }
        let dataList = e.dataTransfer.files
        for (let i = 0; i < dataList.length; i++) {
          if (dataList[i].type.indexOf('image') === -1) {
            this.$Message.error('仅支持Image上传')
            continue
          }
          let formData = new FormData()
          formData.append('file', dataList[i])
          this.contentAddFile(formData)
        }
      })
      this.editor.codemirror.on('paste', (editor, e) => {
        if (!(e.clipboardData && e.clipboardData.files)) {
          this.$Message.error('该浏览器不支持操作')
          return
        }
        let dataList = e.clipboardData.files
        for (let i = 0; i < dataList.length; i++) {
          if (dataList[i].type.indexOf('image') === -1) {
            this.$Message.error('仅支持Image上传')
            continue
          }
          let formData = new FormData()
          formData.append('file', dataList[i])
          this.contentAddFile(formData)
        }
      })
    },
    contentAddFile: function (formData) {
      let _this = this
      uploadImg(formData).then(res => {
        if (res.data.code === 1) {
          _this.editor.value(_this.editor.value() + '![](' + res.data.src + ')')
        }
      })
    }
  },
  mounted () {
    this.editor = new Simplemde(Object.assign(this.options, {
      element: this.$refs.editor
    }))
    /**
     * 事件列表为Codemirror编辑器的事件，更多事件类型，请参考：
     * https://codemirror.net/doc/manual.html#events
     */
    this.addEvents()
    let content = localStorage.markdownContent
    if (content) this.editor.value(content)
  }
}
</script>

<style lang="less">
.markdown-wrapper{
  .editor-toolbar.fullscreen{
    z-index: 9999;
  }
  .CodeMirror-fullscreen{
    z-index: 9999;
  }
  .CodeMirror-fullscreen ~ .editor-preview-side{
    z-index: 9999;
  }
}
</style>
